<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="nav">
    <div class="svg-w" :style="`width:${width}px;background-color:${backgroundcolor1};`">
      <div class="svg-n" :style="`background-color:${backgroundcolor2};`">
        <SvgIcon :name="icon" color="white"></SvgIcon>
      </div>
      <p class="text">{{ text === 'technology' ? '近期技术输出' : text === 'cultivation' ? '技术的自我修养' : text === 'share' ? '更多分享'
        :
        'Myfriends' }}</p>
    </div>
    <div class="right">
      <div class="right-n" :style="`background-color:${backgroundcolor1};`">
        更多
        <SvgIcon name="content-右箭头"></SvgIcon>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
defineProps<{
  text: string
  width: number
  icon: string
  backgroundcolor1?: string
  backgroundcolor2?: string

}>()
</script>

<style scoped lang="scss">
.nav {
  display: flex;
  height: 40px;
  justify-content: space-between;

  .svg-w {
    background-color: #8c099d;
    border-radius: 15px;
    display: flex;
    align-items: center;

    .svg-n {
      display: inline-block;
      font-size: 22px;
      width: 45px;
      height: 40px;
      line-height: 45px;
      background-color: #5e0569;
      border-radius: 15px;
      text-align: center;
      margin-right: 20px;
    }


  }

  .right {
    height: 100%;
    display: flex;
    align-items: center;

    .right-n {
      font-size: 16px;
      width: 70px;
      height: 30px;
      border-radius: 12px;
      color: aliceblue;
      background-color: #8c099d;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>